<template>
  <div class="content-div">
    <div class="back-top-div">
      <div class="zhye-div">账户余额：</div>
      <div class="je-div">¥40.00</div>
      <div class="txbt-div flex row-center" @click="$router.push('/applyForWithdrawal')">提现</div>
    </div>
    <div class="card-div">
      <div class="search-div flex">
        <van-field v-model="formItem.text" left-icon="search" placeholder="请输入关键词" />
      </div>
      <div class="flex row-center">
        <div class="time-div mt8 flex row-center">
          <van-field
            readonly
            clickable
            name="datetimePicker"
            v-model="formItem.start_time"
            left-icon="calendar-o"
            input-align="right"
            placeholder="开始时间"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请选择开始时间' }]"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="datetime"
              title="选择开始时间"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm"
              @cancel="cancel"
            />
          </van-popup>
        </div>
        <div class="mlr">至</div>
        <div class="time-div mt8 flex row-center">
          <van-field
            readonly
            clickable
            name="datetimePicker"
            v-model="formItem.end_time"
            left-icon="calendar-o"
            input-align="right"
            placeholder="结束时间"
            @click="showPicker1 = true"
            :rules="[{ required: true, message: '请选择结束时间' }]"
          />
          <van-popup v-model="showPicker1" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="datetime"
              title="选择结束时间"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm1"
              @cancel="cancel1"
            />
          </van-popup>
        </div>
      </div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="list-outbox">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div>
              <div @click="toPage(item)" class="list-item-box" v-for="(item, index) in list" :key="index">
                <div class="list-center-box">
                  <div class="item-name flex row-between">
                    <span>全天陪诊提成</span>
                    <span style="color:red;">20.00</span>
                  </div>
                  <div class="service-time flex row-between">
                    订单编号：{{item.expectedTime}}
                  </div>
                  <div class="service-time flex row-between">
                    {{item.expectedTime}}
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { date0str } from '@/api/medical.js'
import { findAccompanyingOrderList } from '@/api/medicalWaiter.js'
export default {
  name: 'withdrawalDetails',
  data () {
    return {
      formItem: {},
      showPicker: false,
      showPicker1: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      loading: false,
      finished: false,
      isLoading: false,
      list: []
    }
  },
  computed: {},
  methods: {
    confirm (value) {
      this.formItem.start_time = date0str(value)
      this.showPicker = false
    },
    confirm1 (value) {
      this.formItem.end_time = date0str(value)
      this.showPicker1 = false
    },
    cancel () {
      this.showPicker = false
    },
    cancel1 () {
      this.showPicker1 = false
    },
    onLoad () {
      findAccompanyingOrderList({
        accompanying_physician_id: this.$store.state.user.severUserInfo.accompanying_physician_id,
        province: this.$store.state.app.city.province_code,
        city: this.$store.state.app.city.city_code,
        type: '',
        state: ''
      }).then(res => {
        if (res.data.errcode === 0) {
          let array = res.data.data
          this.list = array
          this.loading = false
          this.finished = true
        }
      })
    },
    clearParam () {
      this.list = []
      this.loading = true
      this.finished = false
      this.onLoad()
    },
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.clearParam()
        this.isLoading = false
      }, 1000)
    }
  },
  mounted () {}
}
</script>
<style scoped lang="less">
  .content-div {
    padding: 8px;
    background-color: #f2f3f7;
    font-family: PingFangSC;
    height: 100%;
    .back-top-div {
      border-radius: 8px;
      background-image: url('../../../../../assets/images/余额bg.png');
      height: 100px;
      background-repeat: no-repeat;
      background-position: top;
      color: #FFFFFF;
      .zhye-div {
        position: absolute;
        top:30px;
        left: 30px;
      }
      .je-div {
        position: absolute;
        top: 60px;
        left: 30px;
      }
      .txbt-div {
        position: absolute;
        height: 30px;
        width: 70px;
        top: 40px;
        left: 70%;
        border: 1px solid #ffffff;
        border-radius: 50px;
        background-color: rgba(255, 255, 255, 0.1);;
        // background-color: #FFFFFF;
      }
    }
    .card-div {
      background-color: #ffffff;
      padding: 8px;
      border-radius: 8px;
      min-height: 187px;
      margin-top: 12px;
      .search-div {
        padding: 8px;
        background-color: #f8f8f8;
        border-radius: 5px;
      }
      .time-div {
        padding: 8px;
        background-color: #f8f8f8;
        border-radius: 5px;
      }
      .list-outbox{
        margin: 0px auto 10px;
        .list-item-box{
          border-bottom: 1px solid #eeeeee;
          box-sizing: border-box;
          padding: 10px 0px;
          background-color: #FFFFFF;
          .list-head-box{
            height: 32px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 7px;
            background-color: #f8f8f8;
            border-radius: 5px;
            margin-bottom: 8px;
            .status-box{
              display: flex;
              flex-direction: row;
              align-items: center;
              width: 100%;
              img{
                width: 24px;
                height: 24px;
                border-radius: 50%;
                margin-right: 6px;
              }
            }
          }
          .list-name-box{
            // display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            height: 17px;
            padding-bottom: 10px;
            border-bottom: 1px solid #edeae6;
            width: 100%;
            .list-name{
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
              // width: 100%;
            }
          }
          .list-center-box{
            // padding-bottom: 10px;
            .hospital-name{
              font-weight: bold;
              padding-bottom: 4px;
            }
            .item-name{
              margin-top: 7px;
              height: 18px;
              font-size: 14px;
              margin-bottom: 1px;
            }
            .service-time{
              margin-top: 7px;
              height: 18px;
              color: #999999;
              font-size: 10px;
              .btn-box{
                display: flex;
                flex-direction: row;
                align-items: center;
                div:last-child{
                  margin-left: 6px;
                  color: #FFFFFF;
                  height: 22px;
                  background-color: #1989fa;
                  padding: 0px 6px;
                  line-height: 22px;
                  border-radius: 4px;
                  font-size: 10px;
                  width: 50px;
                  text-align: center;
                }
              }
            }
          }
          .list-bottom-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            border-top: 1px solid #f8f8f8;
            .qiangdan-box{
              display: flex;
              flex-direction: row;
              align-items: center;
              img{
                width: 30px;
                height: 30px;
              }
              span{
                padding-left: 4px;
                color: #FF0000;
              }
            }
            .cancel-btn{
              height: 20px;
              color: #1989fa;
              border: 1px solid #1989fa;
              padding: 0px 6px;
              line-height: 20px;
              border-radius: 4px;
              font-size: 10px;
              width: 44px;
              text-align: center;
            }
          }
        }
      }
      .van-cell {
        background-color: #f8f8f8;
        padding: 0px;
        line-height: 16.8px;
      }
      .van-field__label {
        width: 80px;
      }
      /deep/.van-field__control--right {
        text-align: left;
      }
    }
    .mt8 {
      margin-top:8px;
    }
    .mlr {
      margin: 8px 4px 0px 4px;
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .flex1 {
      display: flex;
      justify-content: flex-end;
      flex-direction: row;
      // align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .row-between {
      justify-content: space-between;
    }
  }
</style>
